<!DOCTYPE html>
<html>
	<!-- 签名（添加） -->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../../static/salesman/css/showToast.css" />
		<script src="../../static/public/js/jquery.min.js"></script>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.canvas {
			background: #F5F5F5;
			border-radius: 0.9vw;
			margin-top: 22px;
			margin-left: 18%;
		}

		.finsh {
			transform: rotate(90deg);
			background: #2E58F5;
			color: white;
			width: 32vw;
			height: 10vw;
			border-radius: 0.7vw;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 4.3vw;
			position: absolute;
			bottom: 22%;
			left: -6%;
		}

		.rset {
			transform: rotate(90deg);
			color: #2E58F5;
			font-size: 3.8vw;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30%;
			position: absolute;
			right: -1vw;
			bottom: 23%;
		}
		.qianm{
			transform: rotate(90deg);
			color: #CCCCCC;
			font-size: 3.8vw;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30%;
			position: absolute;
			right: -1vw;
			top: 12%;
		}

		.resetimg {
			width: 3.2vw;
			height: 3.5vw;
			margin-right: 2vw;
		}
	</style>
	<body>
		<canvas class="canvas">

		</canvas>
		<div class="finsh">完成</div>
		<div class="rset">
			<img src="../../static/images/resetname.png" class="resetimg" />
			<span>重新签字</span>
		</div>
		<span class="qianm">请输入签名</span>
	</body>
	<script>
		var canvas = document.querySelector('canvas'),
			oBtn = document.querySelectorAll('div'),
			ctx = canvas.getContext('2d');
		var _x = 0,
			_y = 0,
			x = 0,
			y = 0;
		// 设置画布大小
		canvas.width = $(window).width() - 90;
		canvas.height = $(window).height() - 100;
		// 开始绘制
		canvas.addEventListener('touchstart', function(e) {
			e.preventDefault();
			_x = e.touches[0].pageX,
				_y = e.touches[0].pageY;
			// 路径开始
			ctx.beginPath();
			ctx.moveTo(_x - canvas.offsetTop, _y - canvas.offsetLeft);

			// 路径移动
			this.addEventListener('touchmove', function(e) {
				x = e.touches[0].pageX,
					y = e.touches[0].pageY;
				ctx.lineTo(x - canvas.offsetTop, y - canvas.offsetLeft);
				ctx.stroke();
			});
		});
		// 导出图片
		oBtn[0].onclick = function() {
			var oImg = new Image();
			ctx.drawImage(oImg, 0, 0);
			oImg.src = canvas.toDataURL('image/png');
			document.body.appendChild(oImg);
		}
		// 清空画布
		oBtn[1].onclick = function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}
	</script>
</html>
